import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js";

import "https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" //引入lazyload插件
import "./jquery.pagination.js";

import {
    Indexhead
} from "./index_module.js";

class List {
    constructor() {
            this.indexHead = new Indexhead();
            this.renderlist();
            this.sortlist();
        }
        //渲染
    renderlist() {
        let that = this; //存储this对象
        $.ajax({
            url: 'http://10.31.163.57/gree/php/list.php',
            dataType: 'json',
            success: function(obj) {
                $('.goodsnum').html(obj.goodnumber); //将商品总数量存入.goodsnum标签
                //渲染
                let str = '';
                $.each(obj.pagecontent, function(index, value) {
                    str += `<li>
                    <a href="detail.html?id=${value.sid}">
                             <img data-original="${value.url}" alt="${value.title}" title="${value.title}" class="lazy" width="220" height="220">
                             <p class="title">${value.title}</p>
                             <span>格力董明珠店</span>
                             <p class="price-wrap">
                                 <span class="price">￥${value.price}</span>
                                 <i></i>
                             </p>
                             <p class="sales">已有<span>${value.sailnumber}</span>人购买</p>
                         </a>
                         <p>
                             <a href="#" class="add-card" id="sid${value.sid}">加入购物车</a>
                         </p>
                        </li>`
                })
                $('.list').html(str);
                $('.list li').hover(function() { //添加鼠标划入滑出效果
                        $(this).addClass('list-active').siblings('li').removeClass('list-active');
                    }, function() {
                        $(this).removeClass('list-active');
                    })
                    //懒加载
                $(function() { //相当于原生js的window.onload - 页面加载完成
                    $("img.lazy").lazyload({
                        effect: "fadeIn" //淡入的效果
                    });
                });
                that.defaultsort = []; //保存默认排序的元素数组
                that.pricesort = []; //保存价格排序的元素数组
                that.sales = []; //保存销量排序的元素数组
                //each:类似于for循环遍历，可以使用return false终止遍历。参数也是函数。
                $('.list li').each(function(index, ele) { //循环遍历将元素添加进数组,ele为原生js元素
                    that.defaultsort.push($(ele));
                    that.pricesort.push($(ele));
                    that.sales.push($(ele));
                })
                that.pagesize = obj.pagesize; //存储获取到的页数
                that.pagechange(); //渲染完后为取得页数，在ajax的success函数中使用分页方法
            }
        })
    }


    //分页
    pagechange() {
        let that = this
        $('.page').pagination({
            pageCount: that.pagesize, //总的页数，获取后端
            jump: true, //是否开启跳转到指定的页数，布尔值。
            prevContent: '上一页', //将图标改成上一页下一页。
            nextContent: '下一页',
            callback: function(api) {
                // 将页面传给后端
                $.ajax({
                    url: 'http://10.31.163.57/gree/php/list.php',
                    data: {
                        page: api.getCurrent() //api.getCurrent(); //当前的点击的页码。
                    },
                    dataType: 'json',
                    success: function(data) {
                        //点击页码后重新渲染
                        let content = '';
                        $.each(data.pagecontent, function(index, value) { //遍历数组 index:索引  value:值
                            content += `
                                <li>
                                  <a href="detail.html?id=${value.sid}">
                                     <img src="${value.url}" alt="${value.title}" title="${value.title}">
                                     <p class="title">${value.title}</p>
                                     <span>格力董明珠店</span>
                                      <p class="price-wrap">
                                          <span class="price">￥${value.price}</span>
                                          <i></i>
                                      </p>
                                      <p class="sales">已有<span>${value.sailnumber}</span>人购买</p>
                                 </a>
                                  <p>
                                     <a href="#" class="add-card" id="sid${value.sid}">加入购物车</a>
                                  </p>
                                </li>
                            `;
                        });
                        $('.list').html(content); //渲染
                        $('.list li').hover(function() { //添加鼠标划入滑出效果
                            $(this).addClass('list-active').siblings('li').removeClass('list-active');
                        }, function() {
                            $(this).removeClass('list-active');
                        })

                        //清空两个数组，防止li元素的叠加。
                        that.defaultsort = []; //保存默认排序的元素数组
                        that.pricesort = []; //保存价格排序的元素数组
                        that.sales = []; //保存销量排序的元素数组
                        //each:类似于for循环遍历，可以使用return false终止遍历。参数也是函数。
                        $('.list li').each(function(index, ele) { //循环遍历将元素添加进数组,ele为原生js元素
                            that.defaultsort.push($(ele));
                            that.pricesort.push($(ele));
                            that.sales.push($(ele));
                        })
                    }
                })
            }
        });
    }

    sortlist() {
        //默认排序
        //append():向每个匹配的元素内部的最后追加内容，如果数组里面存在追加的元素，直接将此元素取出，追加到后面。
        $('.sort input').eq(0).on('click', () => {
            $.each(this.defaultsort, function(index, value) { //循环遍历默认排序数组
                $('.list').append(value);
            })
        })

        //按价格升序
        //find(expr|obj|ele)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
        $('.sort input').eq(1).on('click', () => {
            //数组的sort方法排序
            // this.pricesort.sort(function(a, b) { 
            //     return parseFloat(a.find('.price').html().substring(1)) - parseFloat(b.find('.price').html().substring(1));
            // })
            //冒泡排序
            for (let i = 0; i < this.pricesort.length - 1; i++) {
                for (let j = 0; j < this.pricesort.length - i - 1; j++) {
                    //保存前一次数组项的价格和后一项数组项的价格。
                    this.prevprice = parseFloat(this.pricesort[j].find('.price').html().substring(1));
                    this.nextprice = parseFloat(this.pricesort[j + 1].find('.price').html().substring(1));
                    if (this.prevprice > this.nextprice) { //大于为升序，小于为降序
                        //交换位置
                        this.temp = this.pricesort[j];
                        this.pricesort[j] = this.pricesort[j + 1];
                        this.pricesort[j + 1] = this.temp;
                    }
                }
            }
            $.each(this.pricesort, function(index, value) { //循环遍历默认排序数组
                $('.list').append(value);
            })
        })

        //按价格降序
        $('.sort input').eq(2).on('click', () => {
            //数组的sort方法排序
            this.pricesort.sort(function(a, b) {
                return parseFloat(b.find('.price').html().substring(1)) - parseFloat(a.find('.price').html().substring(1));
            })
            $.each(this.pricesort, function(index, value) { //循环遍历默认排序数组
                $('.list').append(value);
            })
        })

        //按销量升序
        $('.sort input').eq(3).on('click', () => {
            //数组的sort方法排序
            this.pricesort.sort(function(a, b) {
                return parseInt(a.find('.sales span').html()) - parseInt(b.find('.sales span').html());
            })
            $.each(this.pricesort, function(index, value) { //循环遍历默认排序数组
                $('.list').append(value);
            })
        })

        //按销量降序

        $('.sort input').eq(4).on('click', () => {
            //数组的sort方法排序
            this.pricesort.sort(function(a, b) {
                return parseInt(b.find('.sales span').html()) - parseInt(a.find('.sales span').html());
            })
            $.each(this.pricesort, function(index, value) { //循环遍历默认排序数组
                $('.list').append(value);
            })
        })
    }
}


export {
    List
}